<template>
  <div class="content">
    <h2>{{ counter }}</h2>
    <button @click="changeCounter">+1</button>
    <h2>{{ appWhy }}</h2>
    <!--<input type="text" v-model="appWhy">   Vue不允许直接修改props的值13。props是单向数据流，子组件不能直接修改父组件传递的值-->
    <!--改为使用计算属性或自定义事件来实现双向绑定-->
    <input 
      type="text" 
      :value="appWhy"
      @input="updateAppWhy($event.target.value)">
  </div>
</template>

<script>

  export default {
    props: {
      counter: {
        type: Number,
        default: 0
      },
      appWhy: {
        type: String,
        default: 'why'
      }
    },
    emits: ['update:counter', 'update:appWhy'],
    methods: {
      changeCounter() {
        this.$emit('update:counter', this.counter + 1)
      },
      updateAppWhy(value) {
        this.$emit('update:appWhy', value)
      }
    }
  }
</script>

<style scoped>
</style>